<template>
  <div class="box">
    <div id="one-box">
      <div v-if="!userInfo" class="n-pglg2">
        <div class="welc s-fc3 f-fs1">
          你可以关注明星和好友品味他们的私房歌单<br />通过他们的动态发现更多精彩音乐
        </div>
        <div class="btn" @click="SET_CHANGE_LOGIN_DIALOG()"></div>
      </div>
      <div v-else class="layout-box">
        <div class="dt-left">
          <EventNews />
        </div>
        <div class="info-right">
          <PersonalDetails class="PersonalDetails" />
          <p class="line"></p>
          <ArtistList />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import PersonalDetails from "@/views/recommend/PersonalDetails.vue";
import EventNews from './EventNews.vue'
import ArtistList from '@/views/recommend/ArtistList'
export default {
  name: "friend",
  components: {
    PersonalDetails,
    EventNews,
    ArtistList
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods:{
    ...mapActions("common", ["SET_CHANGE_LOGIN_DIALOG"]),
  }
};
</script>
<style lang="scss" scoped>
#one-box {
  padding-top: 0;
  padding-bottom: 0;
  padding: 0;
}
.layout-box {
  display: flex;
  ::v-deep .nologin-box.islogin-box {
    outline: 0;
  }
  .line {
    height: 1px;
    background-color: #b1b1b1;
    width: calc(100% - 2px);
    margin: 0 auto;
  }
  .dt-left {
  padding:20px 30px;
    min-height: 700px;
    flex: 1;
  }
  .info-right {
    min-height: 700px;
    width: 300px;
    box-sizing: border-box;
    padding: 0 1px;
    border-left: 1px solid rgb(221, 221, 221);
  }
}
.box {
  margin-top: 5px;
}
.n-pglg2 {
  width: 902px;
  height: 414px;
  margin: 0 auto 0;
  padding-top: 70px;
  background: url(../../assets/img/friend-nologin-bgi.png) no-repeat center 0;
  background-position: 0 70px;
}
.n-pglg2 .welc {
  padding: 178px 0 0 535px;
  line-height: 23px;
  color: #666;
  font-size: 14px;
}
.n-pglg2 .btn {
  cursor: pointer;
  display: block;
  width: 157px;
  height: 48px;
  margin: 36px 0 0 535px;
  background-position: 0 9999px;
}
.n-pglg2 .btn:hover {
  background: url(../../assets/img/friend-nologin-bgi.png) no-repeat 0 -430px;
}
</style>